<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #imgDiv{
            display: none;
        }
    </style>

    <script>
        var divObj;
        //等待浏览器把页面元素加载完毕再执行。
        window.onload = function () {
            divObj = document.getElementById("imgDiv");
            //得到元素中，指定标签子元素的集合
            var imgArray = divObj.getElementsByTagName("img");
            for(var i=0;i<imgArray.length;i++){
                imgArray[i].onclick = function (){
                    changeImg(this);
                }
            }
        }
        function showDiv(){
            divObj.style.display = "block";
        }
        function changeImg(imgObj){
            var faceObj = document.getElementById("faceImg");
            faceObj.src = imgObj.src;
            divObj.style.display = "none";
        }
    </script>
</head>
<body>
    <img src="photo/b3.jpg" id="faceImg"><br>
    <input type="button" value="选择头像" onclick="showDiv()">
    <div id="imgDiv">
        <img src="photo/b3.jpg"><img src="photo/b4.jpg"><img src="photo/b5.jpg"><br>
        <img src="photo/g3.jpg"><img src="photo/g4.jpg"><img src="photo/g5.jpg">
    </div>



</body>
</html>